import { cn } from '@/lib/utils';
import React, { forwardRef, JSX } from 'react';

/* 通用工厂函数：一行创建任何标签 */
const createTypography = <T extends keyof JSX.IntrinsicElements>(
  tag: T,
  base: string
) => {
  const Component = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
    ({ className, ...props }, ref) =>
      React.createElement(tag, {
        ref,
        className: cn(base, className),
        ...props,
      })
  );
  Component.displayName = tag.charAt(0).toUpperCase() + tag.slice(1);
  return Component;
};

/* 全部导出，样式与官网 1:1 */
export const H1 = createTypography('h1', 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl');
export const H2 = createTypography('h2', 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0');
export const H3 = createTypography('h3', 'scroll-m-20 text-2xl font-semibold tracking-tight');
export const H4 = createTypography('h4', 'scroll-m-20 text-xl font-semibold tracking-tight');
export const P   = createTypography('p',   'leading-7 [&:not(:first-child)]:mt-6');
export const Lead= createTypography('p',   'text-xl text-muted-foreground');
export const Large=createTypography('div','text-lg font-semibold');
export const Small=createTypography('small','text-sm font-medium leading-none');
export const Muted=createTypography('span','text-sm text-muted-foreground');
export const InlineCode=createTypography('code','relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold');
export const Quote=createTypography('blockquote','mt-6 border-l-2 pl-6 italic text-muted-foreground');
export const List=createTypography('ul','my-6 ml-6 list-disc [&>li]:mt-2');